<template>
  <a-drawer
    title="招商板块设置"
    :width="$store.getters.isMobile ? 350 : 600"
    :visible="visible"
    @close="onClose"
  >
    <!-- 默认业主联系方式 -->
    <div class="label-class">
      <div style="display: flex">
        <div style="color: red; margin-right: 5px">*</div>
        <div style="color: #626262">默认联系方式</div>
      </div>
      <a-button
        class="btn-click"
        type="primary"
        :disabled="disabledValue"
        @click="contactClick"
        >添加联系方式</a-button
      >
    </div>
    <a-table :dataSource="dataSource" :columns="columns">
      <template #headerCell="{ title, column }">
        <template v-if="column.key === 'phone'">
          <span
            >联系方式&nbsp;
            <a-tooltip>
              <template #title
                >当需要录入多个联系方式时可用“,”隔开，用户在移动端电话联系时随机拨打</template
              >
              <QuestionCircleOutlined /> </a-tooltip
          ></span>
        </template>
      </template>
      <template #bodyCell="{ text, record, index, column }">
        <template v-if="column.key === 'build'">
          <a-select
            v-if="record.editable"
            style="width: 150px"
            placeholder="请选择..."
            v-model:value="build"
            :options="optionsSelect"
            @change="selectChange"
          >
          </a-select>
          <span v-else>{{ text }}</span>
        </template>
        <template v-if="column.key === 'phone'">
          <a-input
            v-if="record.editable"
            v-model:value="phone"
            style="width: 150px"
          />
          <span v-else>{{ text }}</span>
        </template>
        <template v-if="column.key === 'operation'">
          <template v-if="record.editable">
            <a-button type="link" @click="handleTargetAddFinish(record, index)"
              >确认</a-button
            >
            <a-button type="link" @click="handleTargetAddCancel(record, index)"
              >取消</a-button
            >
          </template>
          <template v-else>
            <a-button type="link" @click="handleTargeEdit(record, text, index)"
              >编辑</a-button
            >
            <a-popconfirm
              title="确定删除吗?"
              @confirm="() => handleTargetAddDel(record, index)"
            >
              <a>删除</a>
            </a-popconfirm>
          </template>
        </template>
      </template>
    </a-table>
    <div class="recruit">
      <div>招募推广员</div>
      <div style="margin-left: 5px">
        <a-tooltip>
          <template #title
            >开启后用户可以在移动端参与推广员的
            招募，开通推荐客户的功能</template
          >
          <QuestionCircleOutlined />
        </a-tooltip>
      </div>
    </div>
    <a-switch
      checked-children="开"
      un-checked-children="关"
      v-model:checked="checkedSwitch"
    />
    <a-textarea
      v-model:value="promoterSlogan"
      placeholder="请输入招募标语，吸引更多的用户成为推广员"
      :rows="6"
      style="width: 100%; margin-top: 20px"
    />
    <!-- 默认业主联系方式 -->
    <div class="btn-class">
      <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
      <a-button type="primary" @click="onSubmit">确定</a-button>
    </div>
  </a-drawer>
</template>

<script>
import { defineComponent, reactive, ref, watch, toRefs, nextTick } from "vue";
import request from "../../../../common/utils/request";
import { message } from "ant-design-vue";
import { QuestionCircleOutlined } from "@ant-design/icons-vue";

export default defineComponent({
  name: "setDrawer",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  components: { QuestionCircleOutlined },
  setup(props, context) {
    // 存储变量
    const state = reactive({
      columns: [
        {
          title: "楼宇",
          dataIndex: "build",
          key: "build",
          width: 150,
        },
        {
          dataIndex: "phone",
          key: "phone",
          width: 150,
        },
        {
          title: "操作",
          dataIndex: "operation",
          key: "operation",
          width: 180,
        },
      ],
      dataSource: [],
      disabledValue: false,

      optionsSelect: [],
      build: [],
      phone: "",
      checkedSwitch: false,
      promoterSlogan: "",
      itemList: [],
      list: [],
    });

    // 关闭Click
    const onClose = () => {
      context.emit("clear");
    };
    // 确定Click
    const onSubmit = () => {
      let params = {};
      params.phoneConfig = phoneConfig.value;
      params.openPromoter = state.checkedSwitch;
      params.promoterSlogan = state.promoterSlogan;
      request.put("/org", "/business/customer/config", params).then((res) => {
        message.success("修改成功");
        context.emit("submit");
      });
    };

    // 添加联系方式
    const contactClick = () => {
      state.dataSource.unshift({
        id: "",
        build: "",
        phone: "",
        editable: true,
      });
      state.disabledValue = true;
    };
    // 楼宇选择列表
    const contentList = () => {
      request
        .get("/org", "/build/villageAndBuildList", { checked: 1 })
        .then((res) => {
          res.villageList.map((item) => {
            state.list = state.list.concat(item.buildList);
          });
          state.itemList = state.list.map((item) => {
            return {
              label: item.build_name,
              value: item.id,
            };
          });
          state.optionsSelect = state.itemList;
          configList();
        });
    };

    // 列表楼宇下拉选择change
    const build_name = ref("");
    const selectChange = (value, context) => {
      build_name.value = context.label;
    };

    // 列表确认
    const phoneConfig = ref({});

    const handleTargetAddFinish = (context, index) => {
      if (state.build == 0) {
        message.warning("请您选择楼宇~");
        return;
      }
      state.dataSource.forEach((item) => {
        if (item.id == context.id) {
          item.build = build_name.value ? build_name.value : context.build;
          item.phone = state.phone;
          item.id = state.build;
          item.editable = false;
          phoneConfig.value[state.build] = state.phone;
          state.disabledValue = false;
          console.log(phoneConfig.value);
        }
      });
      state.build = [];
      state.phone = "";
    };
    // 列表取消
    const handleTargetAddCancel = (context, index) => {
      state.dataSource.forEach((item) => {
        if (item.id == context.id) {
          item.editable = false;
        }
      });
      if (!context.id) {
        state.dataSource.splice(index, 1);
        state.disabledValue = false;
        state.build = [];
        state.phone = "";
        return;
      }
      state.disabledValue = false;
      state.build = [];
      state.phone = "";
    };

    // 编辑
    const handleTargeEdit = (context, text, index) => {
      state.dataSource.forEach((item) => {
        if (item.id == context.id) {
          (state.build = context.id),
            (state.phone = context.phone),
            (item.editable = true);
        }
      });
    };
    // 删除
    const handleTargetAddDel = (context, index) => {
      let object = {};
      for (let key in phoneConfig.value) {
        if (key != context.id) {
          object[key] = phoneConfig.value[key];
        }
      }
      phoneConfig.value = object;
      state.dataSource.splice(index, 1);
    };

    // 招商读取
    const configList = () => {
      request.get("/org", "/business/customer/config").then((res) => {
        state.checkedSwitch = res.data.openPromoter;
        state.promoterSlogan = res.data.promoterSlogan;
        phoneConfig.value = res.data.phoneConfig;
        for (let key in res.data.phoneConfig) {
          state.optionsSelect.forEach((item) => {
            if (item.value == key) {
              let newObject = {};
              newObject.build = item.label;
              newObject.phone = res.data.phoneConfig[key];
              newObject.id = item.value;
              state.dataSource = state.dataSource.concat([newObject]);
            }
          });
        }
      });
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          contentList();
        } else {
          state.checkedSwitch = false;
          state.phone = "";
          state.build = [];
          state.promoterSlogan = "";
          phoneConfig.value = {};
          state.dataSource = [];
          state.list = [];
          state.disabledValue = false;
          state.dataSource.splice(state.dataSource.length - 1, 1);
        }
      }
    );

    return {
      ...toRefs(state),
      onClose,
      onSubmit,
      contactClick,
      handleTargetAddFinish,
      handleTargetAddCancel,
      selectChange,
      handleTargetAddDel,
      handleTargeEdit,
    };
  },
});
</script>

<style lang="less" scoped>
.btn-class {
  position: absolute;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 4px 4px;
}
.label-class {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 10px;
  .btn-click {
    border-radius: 5px;
  }
}
.recruit {
  margin: 10px 0;
  display: flex;
}
:deep(.ant-input) {
  width: 125px;
}
</style>
